import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
import React from "react";
const ChildrenEcharts = (props) => {
  const { label, graphic, airvalue, unit } = props;

  var baifenbi = [airvalue];
  var zongjine = [200];

  const graphic1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "rgba(255, 110, 0, 0.1)" },
    { offset: 0.6, color: "#ff6e00" },
    { offset: 1, color: "#ff6e00" },
  ]);
  const graphic2 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "#8b9fff" },
    { offset: 1, color: "#18f5ff" },
  ]);

  const graphic3 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    { offset: 0, color: "rgba(0, 255, 157, 0.1)" },
    { offset: 0.6, color: "#00ff9d" },
    { offset: 1, color: "#00ff9d" },
  ]);
  const option = {
    color: ["#61A8FF"], //进度条颜色
    grid: {
      left: 10,
      right: 10,
      top: 75,
      containLabel: false,
    },
    xAxis: [
      {
        axisLabel: {
          show: false, //让Y轴数据不显示
        },
        show: false,
      },
      //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
      {
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        axisLabel: {
          show: false, //让Y轴数据不显示
        },

        axisTick: {
          show: false, //隐藏Y轴刻度
        },
        axisLine: {
          show: false, //隐藏Y轴线段
        },
      },
      {
        show: true,
        inverse: true,
        data: zongjine,
        // axisLabel: {
        //   align: "right",
        //   verticalAlign: "bottom",

        // formatter: function () {
        //   return [
        //     '{value|' + airvalue   + '}',
        //     '{space| }',  // 添加空格来创建间隔
        //     '{unit|μg/m3}'
        //   ].join('');
        // },
        // rich: {
        //   value: {
        //     color: '#fff',
        //     fontSize: 12,
        //   },
        //   space: {  // 方法1：定义空格样式
        //     width: 4
        //   },
        //   unit: {
        //     color: '#3d3f51',  // 这里可以设置 μg/m3 的颜色
        //     fontSize: 12
        //   }
        // }
        // },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        show: true,
        type: "bar",
        barWidth: "5px", //统计条宽度
        itemStyle: {
          color:
            graphic === "graphic1"
              ? graphic1
              : graphic === "graphic2"
              ? graphic2
              : graphic3,
        },

        labelLine: {
          show: false,
        },

        data: baifenbi,
      },
      {
        show: true,
        type: "bar",
        barGap: "-100%",
        barWidth: "5px", //统计条宽度
        itemStyle: {
          normal: {
            barBorderRadius: 200,
            color: "rgba(22,203,115,0.05)",
          },
        },
        // label: {
        //   color: "#9fc3ff",
        //   fontSize: 12,
        //   show: true,
        //   position: [0, "-260%"],
        //   formatter: function (data) {
        //     return label;
        //   },
        // },

        data: zongjine,
      },
    ],
  };

  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          fontSize: "12px",
        }}
      >
        <div style={{ color: "#9fc3ff" }}>{label}</div>
        <div>
          <span style={{ color: "#ffffff",marginRight:"5px",   fontSize: "14px", }}>{airvalue}</span>
          <span style={{ color: "#3d3f51" }}>{unit}</span>
        </div>
      </div>
      <ReactECharts
        option={option}
        style={{
          height: "10px",
          width: "100%",
        }}
      />
    </>
  );
};

export default ChildrenEcharts;
